<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="../dist/avalon.js"></script>
        <script>
            var vm = avalon.define({
                $id: 'for0',
                header: ['name','age','sex'],
                list: []
            })
            var sexMap = {
                true: "男",
                false: "女"
            }
            avalon.config.debug = false
            function genData(n){
                var ret = []
                for(var i =0 ; i< n; i++){
                    ret.push({
                        name: Math.random(),
                        age: 3+ Math.ceil((Math.random() *30)),
                        sex: sexMap[1-Math.random() > 0.5],
                        desc: Math.random()
                    })
                }
                return ret
            }
            var id = setInterval(function(){
                var t1 = Date.now();
                vm.list = genData(500)
                console.log('total ' + (Date.now() - t1) + ' ms');
              //setInterval()
            }, 50)

        </script>
    </head>

    <body>


        <div ms-controller='for0' >
            <table border="1">
                <tr><th ms-for='el in @header'>{{el}}</th></tr>
               <tr ms-for='tr in @list'>
                    <td ms-for='td in tr | selectBy(["name","age","sex"])' ms-attr="{align:td === 'age' ?'left':'right'}">{{td}}</td>
                </tr>
            </table>

        </div>

    </body>
</html>
